<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWebAssemblySignalRApp</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorWebAssemblySignalRApp.Client.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script>
    <script src="js/jsstore.min.js"></script>
    <script src="js/jsstore.worker.js"></script>
    <script>
        var connection = new JsStore.Connection(new Worker('js/jsstore.worker.js'));
        var database;

        function createChatTable() {
            var dbName ='JsStore_Chat';
            var tblMessage = {
                name: 'Message',
                columns: {
                    // Here "Id" is name of column 
                    Id:{ primaryKey: true, autoIncrement: true },
                    CSS:  { notNull: true, dataType: "string" },
                    IsNotice:  { notNull: true, dataType: "boolean" },
                    Mine : { notNull: true, dataType: "boolean" },
                    Body: {notNull: true, dataType: "string"},
                    Username: { notNull:true, dataType: "string"}
                }
            };
            database = {
                name: dbName,
                tables: [tblMessage]
            }
            initDb();
        }

        async function initDb(){
            const isDbCreated = await connection.initDb(database);
            if(isDbCreated === true){
                console.log("db created");
                // here you can prefill database with some data
            }
            else {
                console.log("db opened");
            }
        }

        async function InsertValue(message) {
            console.log(message);
            var value = {
                CSS: message.css,
                IsNotice: message.isNotice,
                Mine: message.mine,
                Body: message.body,
                Username: message.username
            }

            var insertCount = await connection.insert({
                into: 'Message',
                values: [value]
            });

            console.log(`${insertCount} rows inserted`);
        }

        async function ReadData() {
            var results = await connection.select({
                from: 'Message'
                // where: {
                //     itemName: "Blue Jeans"
                // }
            });

            console.log(results.length + 'record found');
            return results;
        }

        async function testUpdateData() {
            var rowsUpdated = await connection.update({ 
                in: 'Product',
                where: {
                    itemName: {
                        like: '%Blue%'
                    }
                },
                set: {
                    quantity: 2000
                }
            });
            console.log(rowsUpdated + ' rows updated');
        }

        async function testRemoveData() {

            var rowsDeleted = await connection.remove({
                from: 'Product',
                where: {
                    id: 10
                }
            });
            console.log(rowsDeleted + ' record deleted');
        }
    </script>
</body>

</html>
